<template>
  <div id="myPosition">
    <div class="list my-stocks">
      <!--<gj-loadmore :bottom-method="loadBottom" :bottom-all-loaded="bottomAllLoaded" ref="loadmore" style="margin-top: 42px">   -->
      <div class="entry clearfix box" v-for="item in dataList" @click.stop.prevent="clickBox(item)">
        <div class="one link" data-stock-code="" data-exchange-type="">
          <div class="stock">
            <span class="name">{{item.stock_name}}</span>
            <span class="code" v-if="item.exchangeType == 1">SH{{item.stockCode}}</span>
            <span class="code" v-else>SZ{{item.stockCode}}</span>
          </div>
          <div class="digit">
            <div class="one">
              <div class="value">{{item.costPrice}}</div>
              <div class="key">盈亏成本</div>
            </div>
            <div class="two">
              <div class="value">{{item.marketPrice }}</div>
              <div class="key">现价</div>
            </div>
            <div class="three">
              <div class="value">{{item.quantity}}</div>
              <div class="key">数量</div>
            </div>
            <div class="four">
              <div class="value" :class="item.income<0?'negative':'positive'">{{item.income}}</div>
              <div class="key">盈亏(<span class="negative" v-if="item.income<0">{{item.yieldRate}}%</span>
                <span class="positive" v-else>+{{item.yieldRate}}%</span>)
              </div>
            </div>
          </div>
        </div>
        <div class="two" @click.stop="itemSell(item)">
          <a class="btn">
            <div>模拟</div>
            <div>卖出</div>
          </a>
        </div>
      </div>
      <!--</gj-loadmore>-->
    </div>
    <div class="tips" v-if="noData">
      <div>哎哟，我还没有<span class="color-blue">个股持仓</span>哦</div>
      <div class="guide">点击上方买入菜单买入第一支个股</div>
    </div>
    <div class="tips" v-if="error != ''">{{error}}</div>
    <div v-if="firstLoading" class="loading">
      <img src="~assets/images/loading.gif" style="width:40px;height:40px;"/>
      <div>加载中</div>
    </div>
  </div>
</template>

<script>
  import LoadMore from 'components/LoadMore'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import CommonUtil from 'common/common.util'
  export default {
    components: {
      /*子组件*/
      'gj-loadmore': LoadMore
    },
    data() {
      return {
        userCode: '',
        dataList: [],
        start: 0,
        limit: 1000,
        bottomAllLoaded: false,
        firstLoading: true,
        noData: false,
        error: ''
      }
    },
    created() {
      var vm = this;
      vm.userCode = LocalDAO.getUserCode(); //用户ID
      vm.nickName = LocalDAO.getNickname(); //用户名
      vm.fetchData();
    },
    methods: {
      fetchData() {
        var vm = this;
        RemoteDAO.callJCL11123(vm.userCode, vm.start, vm.limit, function (response) {
          if (response.error == 0) {
            vm.error = '';
            response.data.body.holders.forEach(function (item, index) {
              item.stockName = item.stock_name;
              item.stockCode = item.stock_code;
              item.exchangeType = item.exchange_type;
              item.costPrice = CommonUtil.toFixed(item.keep_cost_price, 2); // 成本价
              item.marketPrice = CommonUtil.toFixed(item.last_price, 2); // 市价
              item.quantity = item.current_vol; // 持仓数量
              item.income = CommonUtil.toFixed(item.income_balance, 2); // 盈亏金额
              if (item.keep_cost_price > 0) {
                item.yieldRate = CommonUtil.toFixed((item.last_price - item.keep_cost_price) / item.keep_cost_price * 100, 2);
              } else {
                item.yieldRate = "--";
              }
            });
            vm.dataList = vm.dataList.concat(response.data.body.holders || []);
            if (vm.dataList.length == 0) {
              vm.noData = true;
            } else {
              vm.noData = false;
            }
          } else {
            vm.error = response.data;
          }
          vm.firstLoading =false
        })
      },
      //跳转模拟卖出
      itemSell(item) {
        this.$store.dispatch('setSellGroupId', '')
        this.$router.push({
          path: '/trade/sellout',
          query: {stockCode: item.stockCode, marketCd: item.exchangeType, stockName: item.stockName}
        })
      },
      clickBox(item) {
        var stockCode = item.stockCode;
        var exchangeType = item.exchangeType;

        var marketCode;
        if (exchangeType == "0") {
          marketCode = "SZ";
        } else if (exchangeType == "1") {
          marketCode = "SH";
        }

        RemoteDAO.callStockLive(marketCode + stockCode, "ordinary", "1", function () {

        });
      },
      loadBottom() {
        var vm = this;
        vm.fetchData(function (allLoaded) {
          if (allLoaded) {
            vm.$refs.loadmore.onBottomAllLoaded(); //全部数据加载完成
          } else {
            vm.$refs.loadmore.onBottomLoaded(); //单次加载成功
          }
        })
      }
    }
  }
</script>

<style scoped>
  ::-webkit-scrollbar {
    display: none;
  }

  .my-stocks {
    -webkit-overflow-scrolling: touch;
  }
</style>
